<template>
	<view class="min100  bg">
		<view class="relative">
			<view class="collectPay_bg" style="">
				<view class="white center fw size-32 mt-60">
					订单{{info.status}}
				</view>
				<view class=" center mt-40" style="font-size: 12px;color: #A6A5AB;">
					下单时间：{{info.create_time}}
				</view>
			</view>
		</view>
		<view class="" style="height: 110px;">
		</view>
		<view class="collectPay_bottom p20" style="" @click="godetail(info)">
			<view class="flex1 flex-between" style="align-items: center;">
				<view class="flex1">
					<view class="collectPay_bottom_photo">
						<image :src="info.image" class="photo  radius-20"></image>
					</view>
					<view class="ml-20">
						<view class="">
							{{ info.name }}
						</view>
						<view class="mt-20">
							#26/691
						</view>
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="p20">
			<view class="fw size-28 mb-30">
				订单详情
			</view>
			<view class="flex mb-35">
				<view class="size-23" style="color: #b4b4b4;">
					订单详情
				</view>
				<view class="size-40">
					￥ {{ info.price }}
				</view>
			</view>
			<view class="flex">
				<view class="size-23" style="color: #b4b4b4;">
					订单ID号:
				</view>
				<view class="flex1" style="align-items: center;" @click="copy(info.order_num)">
					<view class="size-20 collectPay_id" style="">
						{{info.order_num}}
					</view>
					<image src="../../static/my/fuzhi.png" class="my_fuzhi"></image>
				</view>
			</view>
			<view class="size-24" style="color: #b4b4b4;">
				<view class="mt-25">
					说明:
				</view>
				<view class="mt-10">
					1.超时未支付订单，系统会自动取消。
				</view>
				<view class="mt-10">
					2.同一账号一段时间内累计取消
				</view>
				<view class="mt-10">
					3.此订单将会被限购一段时间。
				</view>
			</view>
		</view>
		<!-- 	<view class="text-center mb-60">
			<image :src="info.image" class="orderImg radius-20"></image>
			<view class=" size-30 mt-40">
				{{ info.name }}
			</view>
			<view class="mtb-40 red bold size-36"> ￥{{ info.price }} </view>
			<view class="gray mb-60 size-30">
				订单号：{{info.order_num}}
			</view>
			<view class="gray mt-60 size-30">
				下单时间：{{info.create_time}}
			</view>
		</view> -->
		<!-- 支付 -->

		<!-- 		<view class="plr-30 ptb-30" v-if="isWx == true">
			<view class="text-center  bold mb-60 size-32"> 请选择支付方式 </view>
			<radio-group @change="radioChange">
				<label class="flex mb-40 flex-between" v-for="(item, index) in listWx" :key="item.value">
					<view class="flex ">
						<image src="../../static/balance.png" mode="" class="payIcon mr-20" v-if="index == 0"></image>
						<image src="../../static/wx.png" mode="" class="payIcon mr-20" v-if="index == 1"></image>
						<image src="../../static/wx.png" mode="" class="payIcon mr-20" v-if="index == 2 || index == 3">
						</image>
						<view>{{ item.name }}<text v-if="index==0" class="size-26 red">（{{userAccount}})</text></view>
						<view> </view>
					</view>
					<radio :value="item.name" :checked="index === current" color="#44ACFF" />
				</label>
			</radio-group>
		</view> -->
		<!-- 普通H5环境 -->
		<view class="plr-30 " v-if="this.info.status=='待付款'">
			<view class="text-center  bold mb-60 size-32"> 请选择支付方式 </view>
			<radio-group @change="radioChange">
				<label class="flex mb-40 flex-between" v-for="(item, index) in listApp" :key="item.value">
					<view class="flex ">
						<image src="../../static/balance.png" v-if="index == 0" class="payIcon mr-20"></image>
						<image src="../../static/fast.png" v-else class="payIcon mr-20"></image>
						<view>{{ item.name }}
						<!-- <text v-if="index==0" class="size-26 red">（{{userAccount}})</text> -->
						</view>
						<view> </view>
					</view>
					<radio :value="item.name" :checked="index === current" color="#44ACFF" />
				</label>
			</radio-group>
		</view>


		<!-- app环境 -->

		<!-- 	<view class="plr-30 ptb-30">
			<view class="text-center white bold mb-60 size-32"> 请选择支付方式 </view>
			<radio-group @change="radioChange">
				<label class="flex mb-40 flex-between" v-for="(item, index) in listApp" :key="item.value">
					<view class="flex white">
						<image src="../../static/balance.png" v-if="index == 0" class="payIcon mr-20" mode=""></image>
						<image src="../../static/wx.png" v-if="index == 1" class="payIcon mr-20" mode=""></image>
						<image src="../../static/ali.png" v-if="index == 2" class="payIcon mr-20" mode=""></image>
						<image src="../../static/ali.png" v-if="index == 3 || index == 4" class="payIcon mr-20" mode="">
						</image>
						<view>
							{{ item.name }}<text v-if="index==0" class="size-26 red">（{{userAccount}})</text>
						</view>
						<view> </view>
					</view>
					<radio :value="item.name" :checked="index === current" color="#44ACFF" />
				</label>
			</radio-group>
		</view> -->


		<view class="flex collectPay_buttom" style="" v-if="this,info.status!='待付款'">
			<u-button @click=gohomeindex size="medium">我的藏品</u-button>
			<view class="collectPay_buttom_button ml-20" @click="goblindBox">
				继续购买
			</view>
		</view>
		<view class="" v-if="this.info.status=='待付款'">
			<!-- 	<u-button type="primary" hover-class="none" style="color: #fff !important" @click="toPay" class="payBtn">
				确认支付
			</u-button> -->
			<view class="payBtn collectPay_buttom_button1 " @click="toPay">
				立即支付
			</view>
			<u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number"
				:dot-enabled="false" :tooltip="false" default="">
				<view style="text-align: center;">
					请输入密码
				</view>
				<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"
					@finish="finish"></u-message-input>
			</u-keyboard>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import wx from 'weixin-js-sdk';
	// #endif
	export default {
		data() {
			return {
				showKeyboard: false, //密码输入的显示隐藏
				password: '', //输入的密码
				payType: '',
				payId: undefined,
				userAccount: 0,
				listApp: [],
				listWx: [],
				list: [],
				current: 0,
				info: {},
				isWx: false,
				btnDisabled: false,
				config_appid: '',
				id: ''
			};
		},
		onLoad(options) {
			console.log(options);
			this.id = options.order_id;
			console.log();
			this.GetPayType();
			this.$http('api/orders/boxOrderDetail', {
				id: this.id
			}).then(res => {
				this.info = res;
				console.log(this.info);
				if (this.info.status == 0) {
					this.info.status = '待付款'
				} else if (this.info.status == 1) {
					this.info.status = '已付款'
				} else if (this.info.status == 2) {
					this.info.status = '已取消'
				}
			});
		},
		onShow() {
			this.$http('api/account/account').then(res => {
				console.log(res);
				this.userAccount = res.account;
			});
			this.$http('api/login/serverConfig').then(res => {
				this.config_appid = res.wx_global_app_id;
			});
			// 判断是否为微信环境
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			let url = window.location.href;
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				if (url.indexOf('code') != -1) {
					let code = url.split('?')[1].split('&')[0].split('=')[1];
					this.$http(
						'api/user/auth', {
							code: code
						},
						'POST'
					).then(res => {});
				}
				this.isWx = true;
			} else {
				this.isWx = false;
			}
			// #endif
		},
		methods: {
			godetail(info) {
				console.log(info);
				this.goods_id = info.goods_id
				uni.navigateTo({
					url: "/pages/pay/collectPaydetail?goods_id=" + this.goods_id
				})
			},
			gohomeindex() {
				uni.navigateTo({
					url: '/pages/my/myCollect'
				})
			},
			goblindBox() {
				uni.switchTab({
					url: "/pages/blindBox/index"
				})
			},
			// 复制
			copy(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						console.log(val, "val``````````````");
						uni.hideToast();
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '区域链地址复制成功',
									icon: 'none'
								});
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				this.$copyText(val).then(
					function(e) {
						console.log(val, e);
						uni.showToast({
							title: '区域链地址复制成功!',
							icon: 'none'
						});
					},
					function(e) {
						uni.showToast({
							title: '区域链地址复制失败!',
							icon: 'none'
						});
					}
				);
				// #endif
			},
			finish() {
				// this.$http('api/user/checkTradePass', {
				// 	pass: this.password
				// }).then(res => {
				// 	if (res.is_check == 0) {
				// 		uni.showToast({
				// 			title: "密码错误",
				// 			icon: 'none'
				// 		})
				// 		return;
				// 	} else if (res.is_check == 1) {
						this.$http('api/orders/boxPay', {
							id: this.id,
							pay_type: this.payId
						}).then(res => {
							this.btnDisabled = false;
							this.buyShow = false;
							// uni.showToast({
							// 	title: "购买成功!"
							// })
							setTimeout(() => {
								window.location.href=res.redirect_url
								// var url = res.redirect_url;
								// uni.navigateTo({
								// 	url: '../my/myWallet/webview?url=' + encodeURIComponent(JSON.stringify(url))
								// })
								// uni.navigateTo({
								// 	url: '../my/myOrder',
								// })
							}, 500)
						})
				// 	}
				// });
				// this.showKeyboard = false;

				//可以放请求的接口及付款后的判断等
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.finish(); //封装的结束函数，我是在后续还有请求接口和判断等
				}
			},
			radioChange(e) {
				this.payType = e.detail.value;
				this.list.forEach((item, index) => {
					if (item.name == e.detail.value) {
						this.payId = item.value;
					}
				});
			},
			
			toPay() {
				// this.showKeyboard = true;
				// this.password = ''; //唤醒输入组件时清空密码
				this.finish()
				let _this = this;
				if (this.current == -1) {
					uni.showToast({
						title: '请选择支付方式!',
						icon: 'none'
					});
					return;
				}
				this.btnDisabled = true;
				// 余额抵扣
				if (this.payId == 0) {
					// H5环境
					// this.$http('api/orders/goodsPay', {
					//   id: this.id,
					//   pay_type: 1
					// }).then(res => {
					//   this.btnDisabled = false;
					//   this.buyShow = false;
					//   uni.showToast({
					//     title: '购买成功!'
					//   });
					//   setTimeout(() => {
					//     uni.navigateTo({
					//       url: '../my/myCollect?current=' + 0 + '&status=' + 0
					//     });
					//   }, 500);
					// });
				}
				if (this.payType == '快捷支付一') {
					// this.$http('api/orders/goodsPay', {
					//   id: this.id,
					//   pay_type: 6
					// }).then(res => {
					//   this.btnDisabled = false;
					//   this.buyShow = false;
					//   let data = res.pay.postData;
					//   let url = res.pay.url;
					//   let postForm = document.createElement('form');
					//   postForm.method = 'post';
					//   postForm.action = url;
					//   let charInput = document.createElement('input');
					//   charInput.setAttribute('name', 'charset');
					//   charInput.setAttribute('value', data.charset);
					//   postForm.appendChild(charInput);
					//   let dataInput = document.createElement('input');
					//   dataInput.setAttribute('name', 'data');
					//   dataInput.setAttribute('value', data.data);
					//   postForm.appendChild(dataInput);
					//   let signInput = document.createElement('input');
					//   signInput.setAttribute('name', 'sign');
					//   signInput.setAttribute('value', data.sign);
					//   postForm.appendChild(signInput);
					//   let typeInput = document.createElement('input');
					//   typeInput.setAttribute('name', 'signType');
					//   typeInput.setAttribute('value', data.signType);
					//   postForm.appendChild(typeInput);
					//   document.body.appendChild(postForm);
					//   postForm.submit();
					// });
				}
				if (this.payId == 4) {
					// this.btnDisabled = true;
					// this.$http('api/orders/goodspay', {
					//   account: this.info.price,
					//   pay_type: 4,
					//   id: this.id
					// }).then(res => {
					//   let url = '';
					//   // #ifdef H5
					//   this.btnDisabled = false;
					//   let data = res.pay.postData;
					//   url = res.pay.url;
					//   let postForm = document.createElement('form');
					//   postForm.method = 'post';
					//   postForm.action = url;
					//   let charInput = document.createElement('input');
					//   charInput.setAttribute('name', 'charset');
					//   charInput.setAttribute('value', data.charset);
					//   postForm.appendChild(charInput);
					//   let dataInput = document.createElement('input');
					//   dataInput.setAttribute('name', 'data');
					//   dataInput.setAttribute('value', data.data);
					//   postForm.appendChild(dataInput);
					//   let signInput = document.createElement('input');
					//   signInput.setAttribute('name', 'sign');
					//   signInput.setAttribute('value', data.sign);
					//   postForm.appendChild(signInput);
					//   let typeInput = document.createElement('input');
					//   typeInput.setAttribute('name', 'signType');
					//   typeInput.setAttribute('value', data.signType);
					//   postForm.appendChild(typeInput);
					//   document.body.appendChild(postForm);
					//   postForm.submit();
					//   // #endif
					//   // #ifdef APP-PLUS
					//   url = res.pay.url;
					//   let id = res.order_id;
					//   uni.navigateTo({
					//     url: './webview?url=' + url + '&id=' + id
					//   });
					//   // #endif
					// });
				}
				if (this.payId == 5) {
					// this.btnDisabled = true;
					// this.$http('api/remittance/remittance', {
					//   account: this.account,
					//   config_id: 5
					// }).then(res => {
					//   let url = '';
					//   // #ifdef H5
					//   this.btnDisabled = false;
					//   let data = res.pay.postData;
					//   url = res.pay.url;
					//   let postForm = document.createElement('form');
					//   postForm.method = 'post';
					//   postForm.action = url;
					//   let charInput = document.createElement('input');
					//   charInput.setAttribute('name', 'charset');
					//   charInput.setAttribute('value', data.charset);
					//   postForm.appendChild(charInput);
					//   let dataInput = document.createElement('input');
					//   dataInput.setAttribute('name', 'data');
					//   dataInput.setAttribute('value', data.data);
					//   postForm.appendChild(dataInput);
					//   let signInput = document.createElement('input');
					//   signInput.setAttribute('name', 'sign');
					//   signInput.setAttribute('value', data.sign);
					//   postForm.appendChild(signInput);
					//   let typeInput = document.createElement('input');
					//   typeInput.setAttribute('name', 'signType');
					//   typeInput.setAttribute('value', data.signType);
					//   postForm.appendChild(typeInput);
					//   document.body.appendChild(postForm);
					//   postForm.submit();
					//   // #endif
					//   // #ifdef APP-PLUS
					//   url = res.pay.url;
					//   let id = res.order_id;
					//   uni.navigateTo({
					//     url: './webview?url=' + url + '&id=' + id
					//   });
					//   // #endif
					// });
				}
				if (this.payId == 7) {
					//      this.$http('api/orders/goodspay', {
					//        id: this.id,
					//        pay_type: 7,
					//        account: this.info.price
					//      }).then(res => {

					//  console.log(res.pay.url)
					//  console.log(res.order_id)

					//        this.btnDisabled = false;
					//        // #ifdef H5
					//        window.location.href = res.pay.url;
					//        // #endif
					//        // #ifdef APP-PLUS
					//        let url = res.pay.url;
					//        let id = res.order_id;
					//        uni.navigateTo({
					//          // url: './webview?url=' + url + '&id=' + id
					// url: './webview?url=' + res.pay.mweb_url
					//        });
					//        // #endif
					//      });
				}
				// app环境
				// #ifdef APP-PLUS
				if (this.payType == '微信支付') {
					this.$http('api/orders/goodsPay', {
						id: this.id,
						pay_type: 3
					}).then(res => {
						// 微信
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: {
								appid: res.pay.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								noncestr: res.pay.noncestr, // 随机字符串
								package: res.pay.package, // 固定值
								partnerid: res.pay.partnerid, // 微信支付商户号
								prepayid: res.pay.prepayid, // 统一下单订单号
								timestamp: res.pay.timestamp, // 时间戳（单位：秒）
								sign: res.pay.sign // 签名，这里用的 MD5/RSA 签名
							},
							success(res) {
								_this.buyShow = false;
								uni.showToast({
									title: '购买成功!'
								});
								setTimeout(() => {
									uni.navigateTo({
										url: '../my/myOrder',
									});
								}, 500);
							},
							fail(e) {}
						});
					});
				} else if (this.payType == '支付宝支付') {
					this.$http('api/orders/goodsPay', {
						id: this.id,
						pay_type: 4
					}).then(res => {
						// 支付宝
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.pay, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							success: function(res) {
								_this.buyShow = false;
								uni.showToast({
									title: '购买成功!'
								});
								setTimeout(() => {
									uni.navigateTo({
										url: '../my/myOrder',
									});
								}, 500);
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					});
				}
				// #endif
				// #ifdef H5
				if (this.isWx == true) {
					if (this.payType == '微信支付') {
						let redirect_uri = window.location.href.split('?appid=')[0];
						this.$http('api/user/userInfo').then(res => {
							if (res.is_wx_auth == 0) {
								window.location.href =
									'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
									this.config_appid +
									'&redirect_uri=' +
									encodeURIComponent(redirect_uri) +
									'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
								return;
							}
							this.$http('api/orders/goodsPay', {
								id: this.id,
								pay_type: 2
							}).then(res => {
								this.btnDisabled = false;
								// 公众号环境
								wx.config({
									debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
									appId: res.pay.appId, // 必填，公众号的唯一标识
									timestamp: res.pay.timeStamp, // 必填，生成签名的时间戳
									nonceStr: res.pay.nonceStr, // 必填，生成签名的随机串
									signature: res.pay.paySign, // 必填，签名
									jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
								});
								wx.ready(() => {
									wx.checkJsApi({
										jsApiList: ['chooseWXPay'],
										success: function(res) {
											console.log('seccess');
										},
										fail: function(res) {
											console.log(res);
										}
									});
									wx.chooseWXPay({
										timestamp: res.pay
											.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
										nonceStr: res.pay.nonceStr, // 支付签名随机串，不长于 32 位
										package: res.pay
											.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
										signType: res.pay
											.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
										paySign: res.pay.paySign, // 支付签名
										success: function(res) {
											_this.buyShow = false;
											uni.showToast({
												title: '购买成功!'
											});
											setTimeout(() => {
												uni.navigateTo({
													url: '../my/myOrder',
												});
											}, 500);
										},
										fail: function(res) {}
									});
								});
								// wx.error(err => {
								// 	alert(err);
								// });
								// }
							});
						});
					}
				}
				// #endif
			},
			GetPayType() {
				this.$http('api/remittance/remittanceList', {
					type: 1
				}).then(res => {
					let _list = [
						// {
						// 	value: '0',
						// 	name: '余额支付'
						// },
						...res.pay.map(item => ({
							value: item.id,
							name: item.name
						}))
					];
					this.list = _list;
					this.listWx = _list;
					this.listApp = _list;
					this.payId = _list[0].value;
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.collectPay_buttom {
		position: fixed;
		z-index: 0;
		bottom: 40rpx;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);

	}

	.collectPay_buttom_button {
		width: 400rpx;
		height: 70rpx;
		background-image: linear-gradient(to right, #686868, #161616);
		color: #fff;
		line-height: 70rpx;
		text-align: center;
	}

	.collectPay_buttom_button1 {
		width: 700rpx;
		height: 90rpx;
		background-image: linear-gradient(to right, #686868, #161616);
		color: #fff;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10px;
	}

	.my_fuzhi {
		width: 24rpx;
		height: 22rpx;
	}

	.collectPay_id {
		width: 200rpx;
		overflow: hidden;
		// width: 400rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0 30rpx 0 0;
	}

	.collectPay_bottom_photo {
		width: 120rpx;
		height: 120rpx;
	}

	.collectPay_bottom {
		width: 100%;
		height: 200rpx;
		background-color: #FFF;
		border-radius: 70rpx 70rpx 0 0;
		border-bottom: 10px solid #F5F5F5;
	}

	.collectPay_bg {
		width: 100%;
		height: 300rpx;
		background-image: linear-gradient(to left top, #575757, #292929);
		z-index: -1;
		position: absolute;
	}

	.payBtn {
		position: fixed;
		z-index: 0;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		display: block;
	}

	.payIcon {
		width: 40rpx;
		height: 40rpx;
	}

	.orderImg {
		width: 185rpx;
		display: block;
		margin: 0 auto;
		height: 185rpx;
	}
</style>
